<template>
	<view class="hbh_container2">
		<headComponent :navTitle="bookName" :fontColor="fontColor" :isBack="true" :selectBackground="background">
		</headComponent>
		<view class="hbh_box" :style="{background}">
			<view class="content" :style="{fontSize:fontSize+'rpx',color:fontColor}" @click="handelCoordinate">
				<scroll-view scroll-y="true" class="scroll-Y">
					<view class="tipTop">
						{{chapter_title}}
					</view>
					<view v-html="chapterContent"></view>
				</scroll-view>
			</view>
			<view class="endText">
				<view class="endLeft">
					{{readProcess}}
				</view>
				<view class="endRight">
					<text>{{currentTime}}</text>
					<text>手机电量:</text>
					<text>{{phoneElectric+'%'}}</text>
				</view>
			</view>
		</view>
		<!-- 侧边目录 -->
		<BookList v-if="isShow" :list="list" @changList="changList" :background="background" :color="fontColor"
			@changeChapter="changeChapter" :process="lightBox" :novel_id="novel_id" @putStatus="putStatus">
		</BookList>
		<!--  -->
		<!-- 顶层功能Card -->
		<view class="Card" :style="{color:fontColor,backgroundColor:background}" v-show="fixedShow">
			<view class="child" v-for="(item,index) in cardList" :key="index" @click="handel(index)">
				<view class="center">
					{{item.text}}
				</view>
			</view>
		</view>
		<!--  -->
		<uni-popup ref="popup" background-color="#aaaaff" :mask-click="false">
			<view class="popup-content" :style="{color:fontColor}"
				:class="{ 'popup-height': type === 'left' || type === 'right' }">
				<view class="topBox">
					<view class="off">
						<text @click="closePopup">关闭</text>
					</view>
					<view class="font">
						<text>字体大小:</text>
						<text v-if="fontSize < 40" @click="addFontSize">+</text>
						<text v-if="fontSize == 40"></text>
						<text>{{fontSize}}</text>
						<text v-if="fontSize > 24" @click="loseFontSize">-</text>
						<text v-if="fontSize == 24"></text>
					</view>
					<view class="twoBtn">
						<text>亮度:</text>
						<slider style="flex:1;" setp="10" activeColor="#e3e3e3" backgroundColor="#000"
							block-size="20" :value="screenLight" @changing="sliderChange" min="0"
							max="100" show-value />
					</view>
					<view class="bcg">
						<text>背景色：</text>
						<view class="bcg_right">
							<view class="bcg_color" v-for="(item,index) in colorList" :key="index"
								:style="{background:item}" @click="handelColor(item)">
							</view>
						</view>

					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import SDTime from "silly-datetime";
	import BookList from "@/components/bookList/bookList.vue"
	import {
		app_getNovelCatalogue,
		app_getNovelChapterContent
	} from "@/api/novelDetail/index.js"
	export default {
		data() {
			return {
				cardList: [{
					text: "目录"
				}, {
					text: "夜间"
				}, {
					text: "日间"
				}, {
					text: "更多设置"
				}],
				type: 'bottom',
				colorList: ["#c6b2c6", "#a3be9f", "#f7f7ba", "#d5cabd"],
				background: "#fff",
				fontColor: "#000",
				fontSize: 30,
				screenLight: 35,
				fixedShow: false,
				isShow: false,
				timer: null,
				phoneElectric: 100,
				currentTime: "",
				bookName: "",
				novel_id: "",
				list: [],
				chapter_id: "",
				chapterContent: "",
				chapter_title: "",
				chapterIndex: 0,
				lightBox: 'hbh1',
				baocun: [],
			};
		},
		computed: {
			readProcess() {
				if (this.list.length > 0) {
					return '阅读进度为：' + Math.floor(((this.chapterIndex + 1) / this.list.length) * 100) + '%'
				} else {
					return '阅读进度为：0%'
				}
			}
		},
		components: {
			BookList
		},
		onLoad(option) {
			this.novel_id = option.novel_id
			this.bookName = option.bookName
			this.timer = setInterval(() => {
				this.getLevel()
			}, 1000)
			//获取历史屏幕亮度
			if (uni.getStorageSync("SCREENLIGHT")) {
				uni.setScreenBrightness({
					value: uni.getStorageSync("SCREENLIGHT") / 100,
					success: () => {
						this.screenLight = uni.getStorageSync("SCREENLIGHT")
					}
				});
			} else {
				//获取屏幕亮度
				uni.getScreenBrightness({
					success: (res) => {
						this.screenLight = parseInt(res.value * 100)
					}
				});
			}
			//获取历史阅读背景色
			if (uni.getStorageSync("BACKGROUNDCOLOR")) {
				this.background = uni.getStorageSync("BACKGROUNDCOLOR")
			}
			//获取历史字体颜色
			if (uni.getStorageSync("Color")) {
				this.fontColor = uni.getStorageSync("Color")
			}
			//获取历史字体大小
			if (uni.getStorageSync("FontSize")) {
				this.fontSize = uni.getStorageSync("FontSize")
			}
			let res = uni.getStorageSync("list")
			if (res) {
				if (JSON.parse(res).novel_id == this.novel_id) {
					this.list = JSON.parse(res).data
				}
			}
			if (uni.getStorageSync("processList")) {
				let arr = JSON.parse(uni.getStorageSync("processList"))
				let index = arr.findIndex(item => item.novel_id == this.novel_id)
				if (index != -1) {
					this.chapterIndex = arr[index].chapterIndex
					this.lightBox = 'hbh' + (this.chapterIndex + 1)
					console.log(this.chapterIndex, "--------------------------")
				}
			}
			uni.showLoading({
				mask: true,
				title: "请求中..."
			})
			this.getNovelCatalogue()
		},
		onUnload() {
			clearInterval(this.timer)
			this.timer = null
		},
		methods: {
			changeChapter(val) {
				this.isShow = false
				console.log(val)
				this.chapterIndex = val
				this.lightBox = 'hbh' + (val + 1)
				this.chapter_id = this.list[this.chapterIndex].chapter_id
				this.chapter_title = this.list[this.chapterIndex].chapter_title
				this.chapterContent = ""
				if (uni.getStorageSync("processList")) {
					let arr = JSON.parse(uni.getStorageSync("processList"))
					let index = arr.findIndex(item => item.novel_id == this.novel_id)
					if (index != -1) {
						arr[index].chapterIndex = this.chapterIndex
						uni.setStorageSync("processList", JSON.stringify(arr))
					} else {
						arr.push({
							novel_id: this.novel_id,
							chapterIndex: this.chapterIndex
						})
						uni.setStorageSync("processList", JSON.stringify(arr))
					}
				} else {
					uni.setStorageSync("processList", JSON.stringify([{
						novel_id: this.novel_id,
						chapterIndex: this.chapterIndex
					}]))
				}
				this.getNovelChapterContent()
			},
			//获取章节内容
			getNovelChapterContent() {
				app_getNovelChapterContent({
					chapter_id: this.chapter_id
				}).then((res) => {
					console.log(res)
					if (res.code == 200) {
						this.chapterContent = res.data.content
						uni.hideLoading()
					}
				}).catch((err) => {
					console.log(err)
					uni.hideLoading()
				})
			},
			getNovelCatalogue() {
				app_getNovelCatalogue({
					novel_id: this.novel_id
				}).then((res) => {
					console.log(res, "--------------")
					if (res.code == 200) {
						this.list = res.data
						this.baocun = JSON.parse(JSON.stringify(this.list))
						this.chapter_id = this.list[this.chapterIndex].chapter_id
						this.chapter_title = this.list[this.chapterIndex].chapter_title
						this.getNovelChapterContent()
						uni.setStorageSync("list", JSON.stringify({
							novel_id: this.novel_id,
							data: res.data
						}))
					}
				}).catch((err) => {
					console.log(err)
					uni.hideLoading()
				})
			},
			changList(val) {
				console.log("这里哦")
				this.list = this.list.reverse()
			},
			//获取手机电量
			getLevel() {
				//获取当前时间
				this.currentTime = SDTime.format(new Date(), "YYYY-MM-DD HH:mm:ss").split(" ")[1].substring(0, 5)
				//获取手机电量
				let res = uni.getSystemInfoSync()
				if (res.platform === 'android' && plus) {
					var main = plus.android.runtimeMainActivity();
					var Intent = plus.android.importClass('android.content.Intent');
					var recevier = plus.android.implements(
						'io.dcloud.feature.internal.reflect.BroadcastReceiver', {
							onReceive: (context, intent) => {
								var action = intent.getAction();
								if (action == Intent.ACTION_BATTERY_CHANGED) {
									var level = intent.getIntExtra("level", 0); //电量
									var voltage = intent.getIntExtra("voltage", 0); //电池电压
									var temperature = intent.getIntExtra("temperature",
										0); //电池温度
									//如需获取别的，在这里继续写，此代码只提供获取电量
									// + %
									this.phoneElectric = level
								}
							}
						});
					var IntentFilter = plus.android.importClass('android.content.IntentFilter');
					var filter = new IntentFilter(Intent.ACTION_BATTERY_CHANGED);
					main.registerReceiver(recevier, filter);
				} else if (res.platform === 'ios' && plus) {
					var UIDevice = plus.ios.import("UIDevice");
					var dev = UIDevice.currentDevice();
					if (!dev.isBatteryMonitoringEnabled()) {
						dev.setBatteryMonitoringEnabled(true);
					}
					// 电量 *100 +%
					var level = dev.batteryLevel();
					this.phoneElectric = level
				}
			},
			//目录
			seeList() {
				this.isShow = !this.isShow
			},
			//子组件关闭
			putStatus(val) {
				this.isShow = val
				if (!this.isShow) {
					this.list = this.baocun
				}
			},
			//点击屏幕中心出现底部功能栏
			handelCoordinate(e) {
				let w = uni.getStorageSync("SystemWidth")
				let h = uni.getStorageSync("SystemHeight")
				if (w && h) {
					if (((e.detail.x >= (w * 0.3)) && (e.detail.x <= (w * 0.7))) && ((e.detail.y >= (h * 0.3)) && (
							e.detail.y <= (h * 0.7)))) {
						this.fixedShow = !this.fixedShow
					} else if (e.detail.x >= (w * 0.7)) {
						if (this.chapterIndex == this.list.length - 1) {

						} else {
							this.chapterIndex++
							console.log(this.chapterIndex, this.list.length)
							this.chapter_id = this.list[this.chapterIndex].chapter_id
							this.chapter_title = this.list[this.chapterIndex].chapter_title
							this.lightBox = 'hbh' + (this.chapterIndex + 1)
							this.chapterContent = ""
							if (uni.getStorageSync("processList")) {
								let arr = JSON.parse(uni.getStorageSync("processList"))
								let index = arr.findIndex(item => item.novel_id == this.novel_id)
								if (index != -1) {
									arr[index].chapterIndex = this.chapterIndex
									uni.setStorageSync("processList", JSON.stringify(arr))
								} else {
									arr.push({
										novel_id: this.novel_id,
										chapterIndex: this.chapterIndex
									})
									uni.setStorageSync("processList", JSON.stringify(arr))
								}
							} else {
								uni.setStorageSync("processList", JSON.stringify([{
									novel_id: this.novel_id,
									chapterIndex: this.chapterIndex
								}]))
							}

							this.getNovelChapterContent()
						}
					} else if (e.detail.x <= (w * 0.3)) {
						if (this.chapterIndex != 0) {
							this.chapterIndex--
							this.chapter_id = this.list[this.chapterIndex].chapter_id
							this.chapter_title = this.list[this.chapterIndex].chapter_title
							this.lightBox = 'hbh' + (this.chapterIndex + 1)
							this.chapterContent = ""
							if (uni.getStorageSync("processList")) {
								let arr = JSON.parse(uni.getStorageSync("processList"))
								let index = arr.findIndex(item => item.novel_id == this.novel_id)
								if (index != -1) {
									arr[index].chapterIndex = this.chapterIndex
									uni.setStorageSync("processList", JSON.stringify(arr))
								} else {
									arr.push({
										novel_id: this.novel_id,
										chapterIndex: this.chapterIndex
									})
									uni.setStorageSync("processList", JSON.stringify(arr))
								}
							} else {
								uni.setStorageSync("processList", JSON.stringify([{
									novel_id: this.novel_id,
									chapterIndex: this.chapterIndex
								}]))
							}
							this.getNovelChapterContent()
						}
					}
				}

			},
			//增大字体
			addFontSize() {
				if (this.fontSize >= 40) {

				} else {
					this.fontSize += 2
				}
				uni.setStorageSync("FontSize", this.fontSize)
			},
			//减小字体
			loseFontSize() {
				if (this.fontSize <= 24) {

				} else {
					this.fontSize -= 2
				}
				uni.setStorageSync("FontSize", this.fontSize)
			},
			//底部功能栏
			handel(val) {
				if (val != 3) {
					this.$refs.popup.close()
				}
				if (val != 0) {
					this.isShow = false
				}
				switch (val) {
					case 0:
						this.seeList()
						break;
					case 1:
						this.background = '#000'
						this.fontColor = "#fff"
						uni.setStorageSync("BACKGROUNDCOLOR", '#000');
						uni.setStorageSync("Color", this.fontColor)
						break;
					case 2:
						this.background = '#fff'
						this.fontColor = "#000"
						uni.setStorageSync("BACKGROUNDCOLOR", '#fff');
						uni.setStorageSync("Color", this.fontColor)
						break;
					case 3:
						this.$refs.popup.open(this.type);
						break;
					default:
						console.log("--------")
				}
			},
			//调整屏幕亮度
			sliderChange(e) {
				this.screenLight = e.detail.value
				uni.setScreenBrightness({
					value: this.screenLight / 100,
					success: () => {
						uni.setStorageSync("SCREENLIGHT", this.screenLight)
					}
				});
			},
			//关闭更多设置弹窗
			closePopup() {
				this.$refs.popup.close()
				this.fixedShow = false
			},
			//改变阅读背景色
			handelColor(val) {
				this.fontColor = "#000"
				this.background = val
				uni.setStorageSync("BACKGROUNDCOLOR", val)
				uni.setStorageSync("Color", this.fontColor)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tipTop {
		height: 80rpx;
		line-height: 80rpx;

	}

	.endText {
		color: #ccc;
		font-size: 30rpx;
		height: 100rpx;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		padding-bottom: 20rpx;
		box-sizing: border-box;

		.endLeft {}

		.endRight {
			display: flex;
			align-items: center;
			justify-content: space-between;

			text:nth-of-type(1) {
				margin-right: 20rpx;
			}
		}
	}

	@mixin flex {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	.popup-content {
		@include flex;
		height: 600rpx;

		.topBox {
			width: 100%;
			height: 240rpx;

			.font {
				height: 100rpx;
				overflow: hidden;
				display: flex;
				align-items: center;
				padding: 0 30rpx;
				box-sizing: border-box;

				text:nth-of-type(1) {
					margin-right: 20rpx;
				}

				text:nth-of-type(2) {
					width: 40rpx;
					text-align: center;
					background-color: #ccc;
					border-radius: 10rpx;
					padding: 0 20rpx;
					margin-right: 20rpx;
				}

				text:nth-of-type(3) {
					margin-right: 20rpx;
				}

				text:nth-of-type(4) {
					width: 40rpx;
					text-align: center;
					padding: 0 20rpx;
					margin-right: 20rpx;
					background-color: #ccc;
					border-radius: 10rpx;
				}
			}

			.twoBtn {
				height: 100rpx;
				overflow: hidden;
				display: flex;
				align-items: center;
				padding: 0 30rpx;
				box-sizing: border-box;
			}

			.bcg {
				height: 100rpx;
				display: flex;
				align-items: center;
				padding: 0 30rpx;
				box-sizing: border-box;

				.bcg_right {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.bcg_color {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
					}
				}
			}

			.off {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				height: 50rpx;

				text {
					margin-right: 30rpx;
					font-size: 30rpx;
				}
			}
		}

	}


	.content {
		height: calc(100% - 100rpx);
		box-sizing: border-box;

		.scroll-Y {
			height: 100%;
		}
	}

	.Card {
		position: fixed;
		z-index: 999;
		bottom: 0rpx;
		left: 0rpx;
		width: 100%;
		height: 100px;
		background-color: #f9f9f9;
		display: flex;

		.child {
			width: 25%;
			height: 200rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>